{% extends 'common/goodspublic.html' %}
{% load static %}
{% load highlight %}
{% block head %}
    <script src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
    <script src="{% static 'js/time.js' %}"></script>
    <script src="{% static 'js/popup.mini.js' %}"></script>
    <style>
        .shop-list-mid .tit a {
            color: #909090;
            font-size: 1.4rem;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
        }

        .highlight_color {
            color: red;
        }
    </style>


{% endblock %}



{% block header %}
    <header data-am-widget="header" class="am-header am-header-default sq-head1">

        <div class="search-box">
            <form action="{% url 'haystack_search' %}" method="get">
                <input type="text" name="q" value="{{ query }}" class="cate-input"
                       placeholder="{{ query|default:'请输入您要的搜索的产品关键词' }}"/>
                <input type="submit" class="cate-btn" value=""/>
            </form>
        </div>

    </header>
{% endblock %}

{% block content %}
    <div style="height: 49px;"></div>
    {% if query %}
        <ul class="list-pro" style="margin-top: 20px">
            {% for result in page %}
                <li>
                    <a href="{% url 'goods:商品详情' result.object.pk %}"><img
                            src="{{ MEDIA_URL }}{{ result.object.LOGO }}" class="list-pic1"/></a>
                    <div class="shop-list-mid" style="width: 65%;">
                        <div class="tit">
                            <a href="{% url 'goods:商品详情' result.object.pk %}">
                                {% highlight result.object.spu.spu_name with query html_tag "i" css_class "highlight_color" %}
                                {% highlight result.object.sku_name with query html_tag "i" css_class "highlight_color" %}
                            </a>
                        </div>
                        <div class="am-gallery-desc">￥{{ result.object.price }}</div>
                        <p>销量：{{ result.object.sales }}件</p>
                    </div>
                </li>
            {% empty %}
                <li>没有找到您搜索的产品！</li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}


{% block foot_js %}
    <script type='text/javascript'>
        (function () {
            new PopUp_api({el: '.index-qd', html: '.qd-box'});
        })()
    </script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/amazeui.min.js' %}"></script>

    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.12&key=5a380f6714c6175d618bf761212e0a5d&plugin=AMap.CitySearch"></script>
    <script type="text/javascript">

    </script>
{% endblock %}
